<template>
  <div class="wrap">
    <div id="map"></div>
    <button
      style="
        position: fixed;
        width: 100px;
        height: 100px;
        backgroundColor: #f40;
      "
      @click="drawRect"
    >
      rect
    </button>
    <button
      style="
        position: fixed;
        width: 100px;
        height: 100px;
        top: 100px;
        backgroundColor: #f40;
      "
      @click="rotate"
    >
      rotate
    </button>
    <button style="position: fixed;width: 100px;height: 100px;top: 200px;left: 0;" @click="addImages">add</button>
  </div>
</template>
<script>
mapboxgl.accessToken =
  'pk.eyJ1IjoiYXJjaGl0ZWN0Z3VhbiIsImEiOiJja200dmV2aHIwN2IyMnBxdGZ4bHFiaHc1In0.QAIUvcxoYsFO0CU5RlAdRA'
import DrawRectangle from './RectAngle'
import {TxRectMode,TxCenter} from "./RectAngleRotate"
export default {
  data() {
    return {
      map: null,
      modes: null,
      draw: null,
      poly: null,
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.map = new mapboxgl.Map({
        container: 'map', // container ID
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/satellite-v9', // style URL
        center: [-91.874, 42.76], // starting position [lng, lat]
        zoom: 12, // starting zoom
      })
      this.initDraw()
    },

    initDraw() {
      this.modes = MapboxDraw.modes
      this.modes.draw_rectangle = DrawRectangle
      this.modes.draw_rectangle_rotate = TxRectMode
      console.log(this.modes)
      this.draw = new MapboxDraw({
        modes: this.modes,
        styles: [
          {
            id: 'gl-draw-polygon-fill-inactive', // 指定多边形非选中状态图层样式
            type: 'fill',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'Polygon'],
              ['!=', 'mode', 'static'],
            ],
            paint: {
              'fill-color': '#5ebe7f',
              'fill-outline-color': 'green',
              'fill-opacity': 0.4,
            },
          },
          {
            id: 'gl-draw-polygon-fill-active', // 指定多边形选中状态图层样式
            type: 'fill',
            filter: [
              'all',
              ['==', 'active', 'true'],
              ['==', '$type', 'Polygon'],
            ],
            paint: {
              'fill-color': 'blue',
              'fill-outline-color': 'blue',
              'fill-opacity': 0.1,
            },
          },
          {
            id: 'gl-draw-polygon-midpoint', // 多边形顶点样式
            type: 'circle',
            filter: [
              'all',
              ['==', '$type', 'Point'],
              ['==', 'meta', 'midpoint'],
            ],
            paint: {
              'circle-radius': 3,
              'circle-color': '#fbb03b',
            },
          },
          {
            id: 'gl-draw-polygon-stroke-inactive', // 多边形非激活状态轮廓线样式
            type: 'line',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'Polygon'],
              ['!=', 'mode', 'static'],
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round',
            },
            paint: {
              'line-color': '#f40',
              'line-width': 2,
              'line-dasharray': [0.2, 2],
            },
          },
          {
            id: 'gl-draw-polygon-stroke-active',
            type: 'line',
            filter: [
              'all',
              ['==', 'active', 'true'],
              ['==', '$type', 'Polygon'],
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round',
            },
            paint: {
              'line-color': 'blue',
              'line-dasharray': [0.2, 2],
              'line-width': 2,
            },
          },
          {
            id: 'gl-draw-line-inactive',
            type: 'line',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'LineString'],
              ['!=', 'mode', 'static'],
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round',
            },
            paint: {
              'line-color': '#3bb2d0',
              'line-width': 2,
            },
          },
          {
            id: 'gl-draw-line-active',
            type: 'line',
            filter: [
              'all',
              ['==', '$type', 'LineString'],
              ['==', 'active', 'true'],
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round',
            },
            paint: {
              'line-color': '#fbb03b',
              'line-dasharray': [0.2, 2],
              'line-width': 2,
            },
          },
          {
            id: 'gl-draw-polygon-and-line-vertex-stroke-inactive',
            type: 'circle',
            filter: [
              'all',
              ['==', 'meta', 'vertex'],
              ['==', '$type', 'Point'],
              ['!=', 'mode', 'static'],
            ],
            paint: {
              'circle-radius': 5,
              'circle-color': '#fff',
            },
          },
          {
            id: 'gl-draw-polygon-and-line-vertex-inactive',
            type: 'circle',
            filter: [
              'all',
              ['==', 'meta', 'vertex'],
              ['==', '$type', 'Point'],
              ['!=', 'mode', 'static'],
            ],
            paint: {
              'circle-radius': 3,
              'circle-color': '#fbb03b',
            },
          },
          {
            id: 'gl-draw-point-point-stroke-inactive',
            type: 'circle',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'Point'],
              ['==', 'meta', 'feature'],
              ['!=', 'mode', 'static'],
            ],
            paint: {
              'circle-radius': 5,
              'circle-opacity': 1,
              'circle-color': '#fff',
            },
          },
          {
            id: 'gl-draw-point-inactive',
            type: 'circle',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'Point'],
              ['==', 'meta', 'feature'],
              ['!=', 'mode', 'static'],
            ],
            paint: {
              'circle-radius': 3,
              'circle-color': '#3bb2d0',
            },
          },
          {
            id: 'gl-draw-point-stroke-active',
            type: 'circle',
            filter: [
              'all',
              ['==', '$type', 'Point'],
              ['==', 'active', 'true'],
              ['!=', 'meta', 'midpoint'],
            ],
            paint: {
              'circle-radius': 7,
              'circle-color': '#fff',
            },
          },
          {
            id: 'gl-draw-point-active',
            type: 'circle',
            filter: [
              'all',
              ['==', '$type', 'Point'],
              ['!=', 'meta', 'midpoint'],
              ['==', 'active', 'true'],
            ],
            paint: {
              'circle-radius': 5,
              'circle-color': '#fbb03b',
            },
          },
          {
            id: 'gl-draw-polygon-fill-static',
            type: 'fill',
            filter: [
              'all',
              ['==', 'mode', 'static'],
              ['==', '$type', 'Polygon'],
            ],
            paint: {
              'fill-color': '#404040',
              'fill-outline-color': '#404040',
              'fill-opacity': 0.1,
            },
          },
          {
            id: 'gl-draw-polygon-stroke-static',
            type: 'line',
            filter: [
              'all',
              ['==', 'mode', 'static'],
              ['==', '$type', 'Polygon'],
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round',
            },
            paint: {
              'line-color': '#404040',
              'line-width': 2,
            },
          },
          {
            id: 'gl-draw-line-static',
            type: 'line',
            filter: [
              'all',
              ['==', 'mode', 'static'],
              ['==', '$type', 'LineString'],
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round',
            },
            paint: {
              'line-color': '#404040',
              'line-width': 2,
            },
          },
          {
            id: 'gl-draw-point-static',
            type: 'circle',
            filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Point']],
            paint: {
              'circle-radius': 5,
              'circle-color': '#404040',
            },
          },
        ],
      })
      this.map.addControl(this.draw)
      this.poly = turf.polygon([
        [
          [-2.275543, 53.464547],
          [-2.275543, 53.489271],
          [-2.215118, 53.489271],
          [-2.215118, 53.464547],
          [-2.275543, 53.464547],
        ],
      ])
      this.poly.id = 'ahsjfjhsjf00000'
      this.draw.add(this.poly)
    },
    drawRect() {
      this.draw.changeMode('draw_rectangle')
    },
    rotate(){
        this.draw.changeMode('draw_rectangle_rotate', {
        featureId: this.poly.id, // required
        
        canScale: false,
        canRotate: true,    // only rotation enabled
        canTrash: false,    // disable feature delete

        rotatePivot: TxCenter.Center,   // rotate around center
        scaleCenter: TxCenter.Opposite, // scale around opposite vertex
        
        singleRotationPoint: true, // only one rotation point
        rotationPointRadius: 1.2, // offset rotation point
        
        canSelectFeatures: true,
    });
    },
    addImages(){
      let image = new Image(64, 64)
        // 这里的imageUrl采用require方式调用的base64格式
        image.src = require('../../assets/logo.png')
        image.onload = () => {
          // this.map.addImage('custom-marker', image)
          this.map.addImage('cat', image)
          // Add a data source containing one point feature.
          this.map.addSource('point', {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
              features: [
                {
                  type: 'Feature',
                  geometry: {
                    type: 'Point',
                    coordinates: [-91.874, 42.76],
                  },
                },
              ],
            },
          })
          // Add a layer to use the image to represent the data.
          this.map.addLayer({
            id: 'points',
            type: 'symbol',
            source: 'point', // reference the data source
            layout: {
              'icon-image': 'cat', // reference the image
              'icon-size': 0.25,
            },
          })
        }
    }
  },
}
</script>
<style lang="less" scoped>
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
</style>
